<template>
    <div :class="$store.state.collapseClass">
        <!--logo-->
        <h5 class="main-logo">
            <img src="../../assets/kgc.png" alt="">
            <span v-if="!$store.state.isCollapse" class="logo-info">KGC后台管理</span>
        </h5>
        <el-menu
                class="el-menu-vertical-demo"
                background-color="#304156"
                text-color="#fff"
                :router="true"
                :unique-opened="true"
                :collapse="$store.state.isCollapse"
                :collapse-transition="false"
                :default-active="$route.path"
                active-text-color="#ffd04b">
            <el-menu-item :index="item.path" :key="idx" v-for="(item,idx) in menuData" v-if="!item.children">
                <i :class="item.icon"></i>
                <span slot="title">{{item.title}}</span>
            </el-menu-item>
            <!--二级菜单的渲染-->
            <el-submenu :index="idx+''"  :key="idx" v-else>
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
                <el-menu-item :index="sitem.path" :key="sidx" v-for="(sitem,sidx) in item.children">{{sitem.title}}</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "NavBar",
        data() {
            return {
                //[{title:'首页,path:'/home'},{title:'系统管理',children:[{title:'用户管理',path:'/user'},{title:'角色管理',path:'/role'}]}]
                menuData: this.$store.state.menuData
                //  this.$store.state.isCollapse 从vuex中获取参数
                // isCollapse: this.$store.state.isCollapse
            }
        },
    }
</script>

<style scoped>
    .navbar {
        width: 240px;
        height: 100%;
        position: relative;
        background-color: #304156;
        box-shadow: 5px 0 5px #ccc;
    }

    .navbar-collapse {
        width: 64px;
    }

    .el-menu {
        border: none;
    }

    .main-logo {
        color: white;
        text-align: center;
    }

    .main-logo img {
        width: 55px;
        vertical-align: middle;
    }
</style>
